<template>
	<div>
		<!-- banner -->
		<div class="banner_z">
			<swiper class="banner" ref="mySwiper" :options="swiperOptions">
				<swiper-slide v-for="(item , i) in swiperbannerlist" :key="i">
					<img :src="item.gs_img" />
					<div class="banner_js">
						<span class="gs_name">{{item.gs_name}}</span>
						<div class="xian"></div>
						<h1 class="gs_xl">{{item.gs_xl}}</h1>
						<span class="gs_zz">{{item.gs_zz}}</span>
						<button>{{item.gs_an}}</button>
					</div>
				</swiper-slide>
				<div class="swiper-button-prev" slot="button-prev"></div>
				<div class="swiper-button-next" slot="button-next"></div>
				<div class="swiper-pagination" slot="pagination">
					<span class="swiper-pagination-bullet" v-for="(item , index) in swiperbannerlist" :key="index"></span>
				</div>
			</swiper>
		</div>

		<!-- 公司简介 -->
		<div class="introduction_z">
			<div class="introduction">
				<div class="it_bt">
					<a href="javascript:;"><span>{{introduction.int_jj}}</span></a>
					<div class="h_x">
						<img src="../../assets/images/hang.png">
						<div class="h_x_x"></div>
					</div>
					<p>{{introduction.int_yw}}</p>
				</div>
				<div class="it_nr">
					<ul>
						<li v-for="(item , index) in introduction.children" :key="index">
							<a href="SF_about.html">
								<img class="tu1" :src="item.int_title_img">
								<img class="b1" src="../../assets/images/jj_b_1.png">
								<span>{{item.int_title}}</span>
								<span class="nr_x"></span>
							</a>
							<div class="it_jj">
								<span>{{item.int_details}}</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 新闻中心 -->
		<div class="xw_z">
			<div class="xw">
				<div class="it_bt">
					<a href="javascript:;"><span class="xw_z2">{{news.new_jj}}</span></a>
					<div class="h_x">
						<img src="../../assets/images/hang1.png">
						<div class="h_x_x"></div>
					</div>
					<p class="xw_z1">{{news.new_yw}}</p>
				</div>
				<div class="xw_nr">
					<ul>
						<li :class="index==0?'xw_left':'xw_right'" v-for="(item,index) in news.children" :key="index">
							<a href="javascript:;"><img class="xw_tu" :src="item.new_title_img"></a>
							<div class="left_nr">
								<a href="javascript:;"><span class="nr_bt">{{item.new_title}}</span></a>
								<div class="left_time">
									<img src="../../assets/images/time_tu.png"><span>发布时间：{{item.new_time}}</span>
									<img class="ll" src="../../assets/images/time_tu1.png"><span>浏览数：{{item.new_num}}</span>
								</div>
								<p>{{item.new_details}}</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 产品展示 -->
		<div class="cp_z">
			<div class="cp">
				<div class="it_bt">
					<a href="javascript:;"><span>{{product.pro_jj}}</span></a>
					<div class="h_x">
						<img src="../../assets/images/hang.png">
						<div class="h_x_x"></div>
					</div>
					<p>{{product.pro_yw}}</p>
				</div>
				<span class="cp_center center">{{product.pro_nr}}</span>
				<swiper class="cp_nr" ref="mySwiper1" :options="productswiperOptions">
					<swiper-slide class="cp_nr_list" v-for="(item , index) in product.children" :key="index">
						<div class="cp_zs">
							<img class="cp_tu" :src="item.pro_title_img">
							<div class="zs_xx">
								<span class="zs_bt">{{item.pro_title}}</span>
								<span class="zs_fn">{{item.pro_type}}</span>
								<p>{{item.pro_details}}</p>
								<a href="javascript:;"><img src="../../assets/images/sp_ss.png"></a>
								<img src="../../assets/images/sp_lj.png">
							</div>
						</div>
						<div class="cp_xx">
							<div class="xx_left">
								<span>{{item.pro_xq_title}}</span>
								<p>{{item.pro_xq_nr}}</p>
							</div>
							<div class="xx_right">
								<a href="">View</a>
							</div>
						</div>
					</swiper-slide>

					<div class="swiper-button-prev" slot="button-prev">
						<img src="../../assets/images/left_tu.png">
					</div>
					<div class="swiper-button-next" slot="button-next">
						<img src="../../assets/images/right_tu.png">
					</div>
				</swiper>
			</div>
		</div>
		
		<!-- 案例展示 -->
		<div class="al_z">
			<div class="al">
				<div class="it_bt">
					<a href="javascript:;"><span>{{caselist.case_jj}}</span></a>
					<div class="h_x">
						<img src="../../assets/images/hang.png">
						<div class="h_x_x"></div>
					</div>
					<p>{{caselist.case_yw}}</p>
				</div>
				<span class="al_center center">{{caselist.case_nr}}</span>
				<swiper class="al_nr" ref="mySwiper2" :options="caseswiperOptions">
					<swiper-slide class="al_nr_list" v-for="(item , index) in caselist.children" :key="index">
						<div class="al_zs">
							<img class="al_tu" :src="item.case_title_img">
							<div class="zs_xx">
								<span class="zs_bt">{{item.case_title}}</span>
								<span class="zs_fn">{{item.case_type}}</span>
								<p>{{item.case_details}}</p>
								<a href="SF_chanpin_xq.html"><img src="images/sp_ss.png"></a>
								<img src="images/sp_lj.png">
							</div>	
						</div>
						<div class="al_xx">
							<span class="xx_bt">{{item.case_xq_title}}</span>
							<span class="xx_js">{{item.case_xq_yw}}</span>
							<p>{{item.case_xq_nr}}</p>
						</div>
					</swiper-slide>
					<div class="swiper-button-prev" slot="button-prev">
						<img src="../../assets/images/left_tu.png">
					</div>
					<div class="swiper-button-next" slot="button-next">
						<img src="../../assets/images/right_tu.png">
					</div>
				</swiper>
			</div>
		</div>
		
		<!-- 视频展示 -->
		<div class="sp_z">
			<div class="sp">
				<div class="it_bt">
					<a href="javascript:;"><span>{{videolist.video_jj}}</span></a>
					<div class="h_x">
						<img src="../../assets/images/hang.png">
						<div class="h_x_x"></div>
					</div>
					<p>{{videolist.videp_yw}}</p>
				</div>
				<div class="sp_nr">
					<ul>
						<li v-for="(item , index) in videolist.children" :key="index">
							<img class="sp_tu" :src="item.video_title_img">
							<div class="sp_js">
								<span class="sp_bt">{{item.video_title}}</span>
								<div class="js_time">
									<img src="../../assets/images/time_tu.png"><span>发布时间：{{item.video_time}}</span>
									<img class="ll" src="../../assets/images/time_tu1.png"><span>浏览数：{{item.video_num}}2</span>
								</div>
								<p>{{item.video_xq_nr}}</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<!-- 联系我们 -->
		    <div class="lx_z">
		    	<div class="lx">
		    		<div class="it_bt">
			    	    <a href="SF_lianxi.html"><span>联系我们</span></a>
			    	    <div class="h_x">
			    	        <img src="../../assets/images/hang.png">
			    	        <div class="h_x_x"></div>
			    	    </div>
			    	    <p>Contact  us</p>
			    	</div>
		    		<div class="lx_nr">
		    			<div class="lx_left">
		    				<div class="hang">
		    				    <input type="text" class="name_r" placeholder="姓名">
		    				    <div class="name_q">
		    				    	<img src="../../assets/images/lx_name.png">
		    				    	
		    				    </div>
		    				    <input type="text" class="name_w" placeholder="邮件">
		    				    <div class="name_e">
		    				    	<img src="../../assets/images/lx_yj.png">
		    				    	
		    				    </div>
		    				</div>
		    				<div class="hang">
		    					<textarea class="lx_ly" placeholder="留言..."></textarea>
		    					<div class="ly_a">
		    				    	<img src="../../assets/images/lx_ly.png">
		    				    </div>
		    				</div>
		    				<input type="submit" class="tj_an" value="提交">
		    			</div>
		    			<div class="lx_right">
		    				<span class="lx_bt">重庆苏福节能科技有限公司</span>
		    				<div class="hang">
		    				    <img src="../../assets/images/lx_sj.png"><span>电话：0362-5125465</span>
		    				</div>
		    				<div class="hang">
		    				    <img src="../../assets/images/lx_dyj.png"><span>传真：0635-5125465</span>
		    				</div>
		    				<div class="hang">
		    				    <img src="../../assets/images/lx_zb.png"><span>地址：重庆市九龙坡区杨家坪前进支路1号18-8#</span>
		    				</div>
		    				<div class="hang" style=" margin-top:20px;">
		    				    <img src="../../assets/images/lx_yj1.png"><span>E-mail：5125465435@qq.com</span>
		    				</div>
		    				<div class="hang">
		    				    <img src="../../assets/images/lx_yj2.png"><span>邮政编码：400050</span>
		    				</div>
		    				<div class="hang">
		    				    <img src="../../assets/images/lx_wy.png"><span>网址：www.chongqisufu.com.cn</span>
		    				</div>
		    			</div>
		    		</div>
		    	</div>
		    </div>
	</div>
</template>

<script>
	export default {
		data() {
			return {

				count: 0,
				swiperOptions: {
					loop: true,
					//自动轮播
					autoplay: {
						delay: 2000,
						//当用户滑动图片后继续自动轮播
						disableOnInteraction: true,
					},
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
						type: "bullets"
					},
					observer: true,
					observeParents: true,
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev'
					}
				},
				swiperbannerlist: [{
					gs_img: require('../../assets/images/banner1.png'),
					gs_name: '重庆市苏福节能科技有限公司',
					gs_xl: '项目规划、设计科学合理，工程质量安全、可控',
					gs_zz: '我公司将坚持 “技术引领行业发展” 的企业精神，秉承“开拓、创新、公益”的宗旨，做到“项目规划、设计科学合理，工程质量安全、可控”努力为我国的环境保护事业作出自己应有的贡献。',
					gs_an: '开拓 创新 公益'
				}, {
					gs_img: require('../../assets/images/banner1.png'),
					gs_name: '重庆市苏福节能科技有限公司1',
					gs_xl: '1项目规划、设计科学合理，工程质量安全、可控',
					gs_zz: '1我公司将坚持 “技术引领行业发展” 的企业精神，秉承“开拓、创新、公益”的宗旨，做到“项目规划、设计科学合理，工程质量安全、可控”努力为我国的环境保护事业作出自己应有的贡献。',
					gs_an: '开拓 创新 公益1'
				}, {
					gs_img: require('../../assets/images/banner1.png'),
					gs_name: '重庆市苏福节能科技有限公司2',
					gs_xl: '2项目规划、设计科学合理，工程质量安全、可控',
					gs_zz: '2我公司将坚持 “技术引领行业发展” 的企业精神，秉承“开拓、创新、公益”的宗旨，做到“项目规划、设计科学合理，工程质量安全、可控”努力为我国的环境保护事业作出自己应有的贡献。',
					gs_an: '开拓 创新 公益2'
				}],
				introduction: {
					int_jj: '公司简介',
					int_yw: 'Company profile',
					children: [{
						int_title_img: require('../../assets/images/jj_tu_1.png'),
						int_title: '公司历史',
						int_details: '重庆市苏福节能科技有限公司成立于2008年坐落于美丽的山城重庆九龙坡区。'
					}, {
						int_title_img: require('../../assets/images/jj_tu2.png'),
						int_title: '产品专利',
						int_details: '拥有两项国家级污水处理的专利-“硅藻精土专利污水处理剂”和“平板陶瓷膜专利”'
					}, {
						int_title_img: require('../../assets/images/jj_tu3.png'),
						int_title: '经营项目',
						int_details: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理'
					}, {
						int_title_img: require('../../assets/images/jj_tu4.png'),
						int_title: '企业文化',
						int_details: '开拓、创新、公益”的宗旨，坚持“技术引领行业发展”的企业精神，做到“项目...'
					}]
				},
				news: {
					new_jj: '新闻中心',
					new_yw: 'News center',
					children: [{
						new_title_img: require('../../assets/images/xw_tu1.png'),
						new_title: '丽水市松阳县污水处理厂二期提标扩建工程正式开工建设能否看到没付款的反馈的反馈的反馈的反馈',
						new_time: '2016-5-25',
						new_num: '3212',
						new_details: '都没开始的考试方面康师傅阿萨德马库斯非煤矿山没法看师傅们开始方面开始免费阿士大夫们开始方面开始免费提标扩建工程总规模4.5万m3/d，其中扩建工程规模2万m3/d。主要建设内容包括新建生化池二座、配水井一座、二沉池二座、污泥泵房一座、反硝化滤池一座、尾水排放管，原改进型SBR池改造为水解酸化池....'
					}, {
						new_title_img: require('../../assets/images/xw_tu2.png'),
						new_title: '丽水市松阳县污水处理厂二期提标扩建工程正式开工建设能否看到没付款的反馈的反馈的反馈的反馈',
						new_time: '2016-5-25',
						new_num: '3212',
						new_details: '都没开始的考试方面康师傅阿萨德马库斯非煤矿山没法看师傅们开始方面开始免费阿士大夫们开始方面开始免费提标扩建工程总规模4.5万m3/d，其中扩建工程规模2万m3/d。主要建设内容包括新建生化池二座、配水井一座、二沉池二座、污泥泵房一座、反硝化滤池一座、尾水排放管，原改进型SBR池改造为水解酸化池....'
					}, {
						new_title_img: require('../../assets/images/xw_tu3.png'),
						new_title: '丽水市松阳县污水处理厂二期提标扩建工程正式开工建设能否看到没付款的反馈的反馈的反馈的反馈',
						new_time: '2016-5-25',
						new_num: '3212',
						new_details: '都没开始的考试方面康师傅阿萨德马库斯非煤矿山没法看师傅们开始方面开始免费阿士大夫们开始方面开始免费提标扩建工程总规模4.5万m3/d，其中扩建工程规模2万m3/d。主要建设内容包括新建生化池二座、配水井一座、二沉池二座、污泥泵房一座、反硝化滤池一座、尾水排放管，原改进型SBR池改造为水解酸化池....'
					}, {
						new_title_img: require('../../assets/images/xw_tu4.png'),
						new_title: '丽水市松阳县污水处理厂二期提标扩建工程正式开工建设能否看到没付款的反馈的反馈的反馈的反馈',
						new_time: '2016-5-25',
						new_num: '3212',
						new_details: '都没开始的考试方面康师傅阿萨德马库斯非煤矿山没法看师傅们开始方面开始免费阿士大夫们开始方面开始免费提标扩建工程总规模4.5万m3/d，其中扩建工程规模2万m3/d。主要建设内容包括新建生化池二座、配水井一座、二沉池二座、污泥泵房一座、反硝化滤池一座、尾水排放管，原改进型SBR池改造为水解酸化池....'
					}]
				},
				product: {
					pro_jj: '产品展示',
					pro_yw: 'News center',
					pro_nr: '重庆市苏福节能科技有限公司西南地区是一家具有较大影响力，并拥有两项国家级污水处理的专利-“硅藻精土专利污水处理剂”和“平板陶瓷膜专利”，主要经营项目为：处理各种生活污水、工业...',
					children: [{
						pro_title_img: require('../../assets/images/cp_tu_1.png'),
						pro_title: '产品展示',
						pro_type: '产品分类：所属分类',
						pro_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						pro_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						pro_xq_nr: '优点是投资少、占地省、运维...大神动脑筋的精髓女'
					}, {
						pro_title_img: require('../../assets/images/cp_tu_1.png'),
						pro_title: '产品展示',
						pro_type: '产品分类：所属分类',
						pro_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						pro_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						pro_xq_nr: '优点是投资少、占地省、运维...大神动脑筋的精髓女'
					}, {
						pro_title_img: require('../../assets/images/cp_tu_1.png'),
						pro_title: '产品展示',
						pro_type: '产品分类：所属分类',
						pro_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						pro_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						pro_xq_nr: '优点是投资少、占地省、运维...大神动脑筋的精髓女'
					}, {
						pro_title_img: require('../../assets/images/cp_tu_1.png'),
						pro_title: '产品展示',
						pro_type: '产品分类：所属分类',
						pro_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						pro_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						pro_xq_nr: '优点是投资少、占地省、运维...大神动脑筋的精髓女'
					}, {
						pro_title_img: require('../../assets/images/cp_tu_1.png'),
						pro_title: '产品展示',
						pro_type: '产品分类：所属分类',
						pro_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						pro_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						pro_xq_nr: '优点是投资少、占地省、运维...大神动脑筋的精髓女'
					}]
				},
				productswiperOptions: {
					slidesPerView: 4,
					spaceBetween: 30,
				},
				caselist: {
					case_jj: '案例展示',
					case_yw: 'News center',
					case_nr: '的看法司法考试非煤矿山免费萨菲罗斯，发牢骚，蛮舒服莫氏空翻莫氏空翻莫斯科山佛山满腹牢骚立方米三方面是否，死灵法师两方面是两方面公司在西南地区是一家具有较大影响力，并拥有两项国家级污水处理的专利-“硅藻...',
					children: [{
						case_title_img: require('../../assets/images/cp_tu_1.png'),
						case_title: '产品展示',
						case_type: '产品分类：所属分类',
						case_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						case_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						case_xq_yw: 'Ozone generatorsksldmfksmfsfmks admsksmfks smfkfs',
						case_xq_nr: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理。打马赛克还没开始呢很可能会思考并且均能达到国家规定的排放标准...'
					}, {
						case_title_img: require('../../assets/images/cp_tu_1.png'),
						case_title: '产品展示',
						case_type: '产品分类：所属分类',
						case_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						case_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						case_xq_yw: 'Ozone generatorsksldmfksmfsfmks admsksmfks smfkfs',
						case_xq_nr: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理。打马赛克还没开始呢很可能会思考并且均能达到国家规定的排放标准...'
					},{
						case_title_img: require('../../assets/images/cp_tu_1.png'),
						case_title: '产品展示',
						case_type: '产品分类：所属分类',
						case_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						case_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						case_xq_yw: 'Ozone generatorsksldmfksmfsfmks admsksmfks smfkfs',
						case_xq_nr: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理。打马赛克还没开始呢很可能会思考并且均能达到国家规定的排放标准...女'
					},{
						case_title_img: require('../../assets/images/cp_tu_1.png'),
						case_title: '产品展示',
						case_type: '产品分类：所属分类',
						case_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						case_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						case_xq_yw: 'Ozone generatorsksldmfksmfsfmks admsksmfks smfkfs',
						case_xq_nr: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理。打马赛克还没开始呢很可能会思考并且均能达到国家规定的排放标准...'
					},{
						case_title_img: require('../../assets/images/cp_tu_1.png'),
						case_title: '产品展示',
						case_type: '产品分类：所属分类',
						case_details: '均能达到国家规定的排放标准，其优点是投资少、占地省、运维费用低、自动化程度高、所有土建建设周期短等。',
						case_xq_title: '硅藻专利污水处理剂大牛市的烦恼是解放南路，发',
						case_xq_yw: 'Ozone generatorsksldmfksmfsfmks admsksmfks smfkfs',
						case_xq_nr: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理。打马赛克还没开始呢很可能会思考并且均能达到国家规定的排放标准...'
					}],
				},
				caseswiperOptions: {
					slidesPerView: 4,
					spaceBetween: 30,
				},
				videolist: {
					video_jj: '案例展示',
					video_yw: 'News center',
					video_nr: '的看法司法考试非煤矿山免费萨菲罗斯，发牢骚，蛮舒服莫氏空翻莫氏空翻莫斯科山佛山满腹牢骚立方米三方面是否，死灵法师两方面是两方面公司在西南地区是一家具有较大影响力，并拥有两项国家级污水处理的专利-“硅藻...',
					children: [{
						video_title_img: require('../../assets/images/sp_tu_1.png'),
						video_title: '工业废水处理工程',
						video_time: '2019-8-5',
						video_num: '252',
						video_xq_nr: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理。打马赛克还没开始呢很可能会思考并且均能达到国家规定的排放标准...'
					},{
						video_title_img: require('../../assets/images/sp_tu_1.png'),
						video_title: '工业废水处理工程',
						video_time: '2019-8-5',
						video_num: '252',
						video_xq_nr: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理。打马赛克还没开始呢很可能会思考并且均能达到国家规定的排放标准...'
					},{
						video_title_img: require('../../assets/images/sp_tu_1.png'),
						video_title: '工业废水处理工程',
						video_time: '2019-8-5',
						video_num: '252',
						video_xq_nr: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理。打马赛克还没开始呢很可能会思考并且均能达到国家规定的排放标准...'
					},{
						video_title_img: require('../../assets/images/sp_tu_1.png'),
						video_title: '工业废水处理工程',
						video_time: '2019-8-5',
						video_num: '252',
						video_xq_nr: '处理各种生活污水、工业废水、医药废水、养殖业废水和各种电镀废水的处理。打马赛克还没开始呢很可能会思考并且均能达到国家规定的排放标准...'
					}],
				}
			}
		},
		computed: {

		},
		methods: {

		}
	}
</script>

<style scoped>
	/*首页*/
	.banner_z {
		width: 100%;
		height: auto;
		float: left;
	}

	.banner_z .banner {
		width: 100%;
		height: auto;
		float: left;
	}

	.banner .swiper-slide {
		width: 100%;
		height: auto;
		float: left;
		position: relative;
	}

	.banner .swiper-slide img {
		width: 100%;
		height: 640px;
		float: left;
	}

	.banner .swiper-slide .banner_js {
		float: left;
		width: 55%;
		height: auto;
		position: absolute;
		left: 22.5%;
		top: 25%;
		text-align: center;
	}

	.banner_js .gs_name {
		font-size: 24px;
		color: #fff;
		line-height: 20px;
	}

	.banner_js .xian {
		width: 50px;
		height: 2px;
		background: #19a1ff;
		margin: 25px auto;
	}

	.banner_js .gs_xl {
		font-size: 36px;
		color: #fff;
		line-height: 50px;
	}

	.banner_js .gs_zz {
		font-size: 18px;
		color: #fff;
		line-height: 25px;
		margin-top: 40px;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.banner_js button {
		display: inline-block;
		width: 160px;
		height: 35px;
		border-radius: 3px;
		border: 3px solid #fff;
		font-size: 18px;
		color: #fff;
		margin-top: 50px;
		background: rgba(0, 0, 0, 0);
		box-sizing: border-box;
		line-height: 35px;
	}

	.swiper-button-next,
	.swiper-container-rtl .swiper-button-prev {
		background-image: url(../../assets/images/left_dian.png);
		right: 0px;
		left: auto;
		width: 34px;
		height: 58px;
	}

	.swiper-button-prev:after,
	.swiper-container-rtl .swiper-button-next:after {
		opacity: 0;
	}

	.swiper-button-next:after,
	.swiper-container-rtl .swiper-button-prev:after {
		opacity: 0;
	}

	.swiper-button-prev,
	.swiper-container-rtl .swiper-button-next {
		background-image: url(../../assets/images/right_dian.png);
		left: 0px;
		right: auto;
		width: 34px;
		height: 58px;
	}

	.swiper-pagination-bullet-active {
		opacity: 1;
		background: #fff;
	}

	.swiper-pagination-bullet {
		width: 20px;
		height: 8px;
		display: inline-block;
		background: #0069b1;
		opacity: 1;
		border-radius: 0;
		margin: 0 5px;
	}

	.swiper-pagination {
		bottom: 20px;
		width: 100%;
	}

	/*introduction*/
	.introduction_z {
		width: 100%;
		height: auto;
		float: left;
	}

	.introduction_z .introduction {
		width: 1200px;
		height: auto;
		margin: 0 auto;

	}

	.introduction .it_bt {
		margin: 40px 25%;
		width: 50%;
		height: auto;
		display: inline-block;
		text-align: center;
	}

	.it_bt span {
		font-size: 22px;
		color: #0069b1;
		line-height: 40px;
	}

	.it_bt .h_x {
		width: 100%;
		height: auto;
		margin: 5px auto;
		display: inline-block;
	}

	.h_x img {
		float: left;
	}

	.h_x .h_x_x {
		width: 30px;
		height: 3px;
		margin-top: -3px;
		background: #df4a43;
		float: left;
		margin-left: 285px;
	}

	.it_bt p {
		font-size: 14px;
		line-height: 18px;
		color: #c6c6c6;
	}

	.introduction .it_nr {
		margin: 10px auto;
		width: 100%;
		height: auto;
		float: left;
	}

	.it_nr ul li {
		width: 22.5%;
		height: auto;
		float: left;
		margin-right: 40px;
		text-align: center;
	}

	.it_nr ul li:last-child {
		margin-right: 0px;
	}

	.it_nr ul li a {
		width: 100%;
		display: inline-block;
		text-align: center;
	}

	.it_nr ul li .active {
		width: 100%;
		display: inline-block;
		text-align: center;
	}

	.it_nr ul li a:hover img {
		width: 52px;
		height: 52px;
		padding: 20px 20px;
		margin: 0 auto;
		border: 4px solid #e8e8e8;
		border-radius: 100%;
		display: inline-block;
		background: #0069b1;
	}

	.it_nr ul li a:hover .tu1 {
		display: none;
	}

	.it_nr ul li a:hover .b1 {
		display: block;
	}

	.it_nr ul li a:hover span {
		width: 100%;
		font-size: 18px;
		line-height: 40px;
		display: inline-block;
		color: #0069b1;
	}

	.it_nr ul li a:hover .nr_x {
		width: 30px;
		height: 2px;
		display: block;
		background: #0069b1;
		margin: 0 auto;
	}

	.it_nr ul li .active img {
		width: 52px;
		height: 52px;
		padding: 20px 20px;
		margin: 0 auto;
		border: 4px solid #e8e8e8;
		border-radius: 100%;
		display: inline-block;
		background: #0069b1;
	}

	.it_nr ul li .active .tu1 {
		display: none;
	}

	.it_nr ul li .active .b1 {
		display: block;
	}

	.it_nr ul li .active span {
		width: 100%;
		font-size: 18px;
		line-height: 40px;
		display: inline-block;
		color: #0069b1;
	}

	.it_nr ul li .active .nr_x {
		width: 30px;
		height: 2px;
		display: block;
		background: #0069b1;
		margin: 0 auto;
	}

	.it_nr ul li a img {
		width: 52px;
		height: 52px;
		padding: 20px 20px;
		margin: 0 auto;
		border: 4px solid #e8e8e8;
		border-radius: 100%;
		display: inline-block;
	}

	.it_nr ul li a .tu1 {
		display: block;
	}

	.it_nr ul li a .b1 {
		display: none;
	}

	.it_nr ul li a span {
		width: 100%;
		font-size: 18px;
		line-height: 40px;
		display: inline-block;
		color: #4a535a;
	}

	.it_nr ul li a .nr_x {
		width: 30px;
		height: 2px;
		display: block;
		background: #e5e5e6;
		margin: 0 auto;
	}

	.it_nr ul li .it_jj {
		width: 100%;
		line-height: 24px;
		hegiht: auto;
		font-size: 14px;
		float: left;
		margin-bottom: 30px;
	}

	.it_jj span {
		width: 100%;
		line-height: 24px;
		hegiht: 24px;
		font-size: 14px;
		float: left;
		text-align: center;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #7c7c7c;
	}

	.it_jj a {
		width: 100%;
		line-height: 20px;
		color: #3e414f;
	}

	/*新闻中心*/
	.xw_z {
		width: 100%;
		height: auto;
		float: left;
		background-image: url("../../assets/images/xw_bj.jpg");
		background-size: 100% 100%;
	}

	.xw_z .xw {
		width: 1200px;
		height: auto;
		margin: 0 auto;
	}

	.xw .it_bt {
		margin: 40px 25%;
		width: 50%;
		height: auto;
		display: inline-block;
		text-align: center;
	}

	.it_bt .xw_z2 {
		color: #fff;
	}

	.it_bt .xw_z1 {
		color: #fff;
	}

	.xw .xw_nr {
		margin: 10px auto;
		width: 100%;
		height: auto;
		float: left;
	}

	.xw_nr .xw_left {
		width: 590px;
		height: auto;
		float: left;
		border-radius: 5px;
		background: #fff;
		margin-right: 20px;
	}

	.xw_nr .xw_left .left_nr p {
		width: 100%;
		height: auto;
		display: inline-block;
		float: left;
		font-size: 14px;
		line-height: 20px;
		color: #7a7c82;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		margin: 5px auto;
	}

	.xw_left .xw_tu {
		width: 100%;
		height: 240px;
		float: left;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.xw_left .left_nr {
		width: 94%;
		height: auto;
		display: inline-block;
		float: left;
		padding: 0 3%;
	}

	.left_nr .nr_bt {
		width: 100%;
		height: auto;
		display: inline-block;
		float: left;
		font-size: 18px;
		line-height: 45px;
		color: #5c5c5c;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
	}

	.left_nr .nr_bt:hover {

		color: #0a5caf;

	}

	.left_nr .left_time {
		width: 100%;
		height: auto;
		display: inline-block;
		float: left;
	}

	.left_time img {
		width: 18px;
		height: auto;
		display: inline-block;
		float: left;
		margin-right: 5px;
	}

	.left_time .ll {
		margin-left: 15px;
	}

	.left_time span {
		font-size: 12px;
		color: #afb0b4;
		line-height: 18px;
		float: left;
		display: inline-block;
		width: (100% - 23px);
	}

	.xw_nr ul li {
		background: #fff;
		float: left;
		width: calc(100% - 610px);
		height: auto;
		border-radius: 5px;
		margin: 0;
		margin-top: 10px;
	}

	.xw_nr ul li:first-child {
		margin-top: 0px;
	}

	.xw_nr ul li:nth-child(2) {
		margin-top: 0px;
	}

	.xw_nr ul .xw_right .xw_tu {
		height: 117px;
		width: 164px;
		float: left;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.xw_nr ul .xw_right .left_nr {
		width: 402px;
		display: inline-block;
		padding: 0 10px;
	}

	.left_nr .right_bt {
		width: 100%;
		height: auto;
		font-size: 18px;
		line-height: 40px;
		color: #5c5c5c;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		cursor: pointer;
	}

	.left_nr .right_bt:hover {
		color: #0a5caf;
	}

	.left_nr .left_time {
		width: 100%;
		float: left;
	}

	.left_nr p {
		width: 100%;
		height: auto;
		display: inline-block;
		float: left;
		font-size: 14px;
		line-height: 20px;
		color: #7a7c82;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin: 5px auto;
	}

	/*产品展示*/
	.cp_z {
		width: 100%;
		height: auto;
		float: left;
	}

	.cp_z .cp {
		width: 1200px;
		height: auto;
		margin: 0 auto;
	}

	.cp .it_bt {
		margin: 40px 25%;
		width: 50%;
		height: auto;
		display: inline-block;
		text-align: center;
	}

	.cp .cp_nr {
		margin: 10px auto;
		width: 100%;
		height: auto;
		overflow: hidden;
		float: left;
		margin-bottom: 50px;
	}

	.cp .cp_center {
		width: 100%;
		line-height: 22px;
		font-size: 14px;
		color: #5c5c5c;
		display: inline-block;
		text-align: center;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.cp_nr ul {
		float: left;
		margin-top: 41px;
		padding-left: 2px;
		padding-bottom: 2px;
	}

	.cp_nr ul li {
		height: 300px;
		-webkit-box-shadow: #7d7d7d 0px 0px 5px;
		-moz-box-shadow: #7d7d7d 0px 0px 5px;
		box-shadow: #7d7d7d 0px 0px 5px;
		float: left;
		overflow: hidden;
	}

	.cp_nr .swiper-button-next {
		width: 26px;
		height: 26px;
		border-radius: 5px;
		background: #000;
		left: 50%;
		top: 3px;
		margin-left: 5px;
		margin-top: 0px;
	}

	.cp_nr .swiper-button-prev {
		width: 26px;
		height: 26px;
		border-radius: 5px;
		background: #000;
		left: 50%;
		top: 3px;
		margin-left: -31px;
		margin-top: 0px;
	}
	.cp_nr .swiper-button-next img,
	.cp_nr .swiper-button-prev img {
		float: left;
		margin-left: 20px;
	}

	.cp_nr .swiper-button-next:hover {
		background: #ff0000;
	}

	.cp_nr .swiper-button-prev:hover {
		background: #ff0000;
	}

	.cp_nr ul li .cp_zs {
		width: 100%;
		height: 222px;
		float: left;
		overflow: hidden;
	}

	.cp_zs .cp_tu {
		width: 100%;
		height: 222px;
		float: left;
	}

	.cp_zs .zs_xx {
		background-color: rgba(14, 118, 189, 0.7);
		float: left;
		cursor: pointer;
		position: absolute;
		top: 222px;
		left: 0;
		z-index: 3;
		width: 90%;
		opacity: 0;
		padding-left: 5%;
		padding-right: 5%;
		height: 222px;
		overflow: hidden;
	}

	.zs_xx .zs_bt {
		width: 100%;
		font-size: 19px;
		line-height: 40px;
		display: inline-block;
		float: left;
		color: #fff;
		margin-top: 10px;
	}

	.cp_nr_list {
		margin-top: 40px;
	}

	.zs_xx .zs_fn {
		width: 100%;
		font-size: 14px;
		line-height: 30px;
		display: inline-block;
		float: left;
		color: #fff;
	}

	.zs_xx p {
		width: 100%;
		font-size: 14px;
		line-height: 24px;
		display: inline-block;
		float: left;
		color: #fff;

	}

	.zs_xx img {
		width: 24px;
		height: 24px;
		float: left;
		margin-top: 20px;
		margin-bottom: 8px;
		margin-right: 10px;
	}

	.cp_nr ul li .cp_xx {
		width: 89%;
		padding: 6%;
		float: left;
		position: absolute;
		bottom: 0px;
		z-index: 5;
		background: #fff;
	}

	.cp_xx .xx_left {
		float: left;
		width: 75%;
		height: auto;
	}

	.xx_left span {
		font-size: 16px;
		line-height: 25px;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #000;
	}

	.xx_left span:hover {
		color: #0a5caf;
		cursor: pointer;
	}

	.xx_left p {
		font-size: 12px;
		line-height: 20px;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #b3b4b8;
	}

	.cp_xx .xx_right {
		float: left;
		width: 25%;
		height: auto;
	}

	.xx_right a {
		width: 80%;
		float: right;
		height: auto;
		padding: 2px 0;
		text-align: center;
		display: inline-block;
		border-radius: 3px;
		font-size: 14px;
		line-height: 23px;
		background: #c6c6c6;
		color: #fff;
		margin-top: 10px;
	}

	.xx_right a:hover {
		background: #0e76bd;
	}

	/*案例展示*/
	.al_z {
		width: 100%;
		height: auto;
		float: left;
		background: #f6f6f6;
	}

	.al_z .al {
		width: 1200px;
		height: auto;
		margin: 0 auto;
	}

	.al .it_bt {
		margin: 40px 25%;
		width: 50%;
		height: auto;
		display: inline-block;
		text-align: center;
	}

	.al .al_nr {
		margin: 10px auto;
		width: 100%;
		height: auto;
		overflow: hidden;
		float: left;
	}

	.al .al_center {
		width: 100%;
		line-height: 22px;
		font-size: 14px;
		color: #5c5c5c;
		display: inline-block;
		text-align: center;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	
	.al_nr .al_nr_list {
		height: 370px;
		float: left;
		overflow: hidden;
		margin-top: 40px;
	}

	.al_nr .swiper-button-next {
		width: 26px;
		height: 26px;
		border-radius: 5px;
		background: #000;
		left: 50%;
		top: 3px;
		margin-left: 5px;
		margin-top: 0px;
	}

	.al_nr .swiper-button-prev {
		width: 26px;
		height: 26px;
		border-radius: 5px;
		background: #000;
		left: 50%;
		top: 3px;
		margin-left: -31px;
		margin-top: 0px;
	}

	.al_nr .swiper-button-next img,
	.al_nr .swiper-button-prev img {
		float: left;
		margin-left: 20px;
	}

	.al_nr .swiper-button-next:hover {
		background: #ff0000;
	}

	.al_nr .swiper-button-prev:hover {
		background: #ff0000;
	}

	.al_nr_list .al_zs {
		width: 100%;
		height: auto;
		float: left;
		overflow: hidden;
	}

	.al_zs .al_tu {
		width: 100%;
		height: 238px;
		float: left;
		border-radius: 5px;
	}

	.al_zs .zs_xx {
		background-color: rgba(14, 118, 189, 0.7);
		float: left;
		cursor: pointer;
		position: absolute;
		top: 239px;
		left: 0;
		z-index: 3;
		opacity: 0;
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		height: 238px;
		border-radius: 5px;
		overflow: hidden;
	}

	.zs_xx .zs_bt {
		width: 100%;
		font-size: 19px;
		line-height: 40px;
		display: inline-block;
		float: left;
		color: #fff;
		margin-top: 20px;
	}

	.zs_xx .zs_fn {
		width: 100%;
		font-size: 14px;
		line-height: 30px;
		display: inline-block;
		float: left;
		color: #fff;
	}

	.zs_xx p {
		width: 100%;
		font-size: 14px;
		line-height: 24px;
		display: inline-block;
		float: left;
		color: #fff;

	}

	.zs_xx img {
		width: 24px;
		height: 24px;
		float: left;
		margin-top: 20px;
		margin-bottom: 8px;
		margin-right: 10px;
	}

	.al_nr_list .al_xx {
		width: 89%;
		padding: 6%;
		float: left;
		position: absolute;
		bottom: 0px;
		z-index: 5;
		background: #fff;
	}

	.al_xx .xx_bt {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		font-size: 18px;
		line-height: 30px;
		margin-top: 10px;
		color: #000;
	}

	.al_xx .xx_bt:hover {
		color: #0a5caf;
		cursor: pointer;
	}

	.al_xx .xx_js {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		color: #5c5c5c;
		font-size: 14px;
		line-height: 25px;
	}

	.al_xx p {
		color: #acacac;
		font-size: 14px;
		line-height: 22px;
		text-align: center;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	/*视频展示*/
	.sp_z {
		width: 100%;
		height: auto;
		float: left;
	}

	.sp_z .sp {
		width: 1200px;
		height: auto;
		margin: 0 auto;
	}

	.sp .it_bt {
		margin: 40px 25%;
		width: 50%;
		height: auto;
		display: inline-block;
		text-align: center;
	}

	.sp .sp_nr {
		margin: 10px auto;
		width: 100%;
		height: auto;
		overflow: hidden;
		float: left;
	}

	.sp_nr .gd {
		width: 100%;
		float: left;
		height: auto;
		text-align: center;
		margin: 2screen and (min-width:1200px)0px auto;
	}

	.gd a {
		width: 200px;
		margin: 0 auto;
		background: #7a7c82;
		height: 50px;
		display: inline-block;
		color: #fff;
		line-height: 50px;
		font-size: 20px;
		margin-top: 20px;
	}

	.sp_nr ul {
		float: left;
	}

	.sp_nr ul li {
		width: 260px;
		height: auto;
		margin-left: 53px;
		float: left;
		position: relative;
	}

	.sp_nr ul li:first-child {
		margin-left: 0px;
	}

	.sp_nr ul li .sp_tu {
		width: 100%;
		height: 115px;
		border-radius: 5px;
		float: left;
		cursor: pointer;
	}

	.sp_nr ul li .sp_js {
		float: left;
		width: 100%;
		height: auto;
	}

	.sp_js .sp_bt {
		width: 100%;
		height: 35px;
		line-height: 35px;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
		font-size: 18px;
		color: #000;
	}

	.sp_js p {
		width: 100%;
		height: auto;
		line-height: 20px;
		font-size: 14px;
		color: #7a7c82;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.sp_js .js_time {
		width: 100%;
		height: auto;
		display: inline-block;
		float: left;
	}

	.js_time img {
		width: 16px;
		height: auto;
		display: inline-block;
		float: left;
		margin-top: 2px;
		margin-right: 5px;
	}

	.js_time .ll {
		margin-left: 10px;
	}

	.js_time span {
		font-size: 12px;
		color: #afb0b4;
		line-height: 18px;
		float: left;
	}

	/*联系我们*/
	.lx_z {
		width: 100%;
		height: auto;
		float: left;
		background: #f6f6f6;
	}

	.lx_z .lx {
		width: 1200px;
		height: auto;
		margin: 0 auto;
	}

	.lx .it_bt {
		margin: 40px 25%;
		width: 50%;
		height: auto;
		display: inline-block;
		text-align: center;
	}

	.lx .lx_nr {
		margin: 10px auto;
		width: 100%;
		height: auto;
		overflow: hidden;
		float: left;
	}

	.lx_nr .lx_left {
		width: 770px;
		margin-left: 5px;
		height: auto;
		float: left;
	}

	.lx_left .hang {
		width: 100%;
		float: left;
		height: auto;
		position: relative;
	}

	.hang .name_r {
		width: 330px;
		float: left;
		height: 40px;
		padding-left: 45px;
		line-height: 40px;
		border: 1px solid #dedede;
		border-radius: 3px;
		font-size: 16px;
		color: #000;
	}

	.hang .name_w {
		width: 330px;
		float: right;
		height: 40px;
		padding-left: 45px;
		line-height: 40px;
		border: 1px solid #dedede;
		border-radius: 3px;
		font-size: 16px;
		color: #000;
	}

	.hang .name_q {
		position: absolute;
		top: 0px;
		left: 10px;
	}

	.name_q img {
		float: left;
		width: 22px;
		height: 18px;
		margin-top: 11px !important;
	}

	.name_q span {
		float: left;
		margin-left: 5px;
		line-height: 40px;
		color: #7c7d81;
	}

	.hang .name_e {
		position: absolute;
		top: 0px;
		left: 416px;
	}

	.name_e img {
		float: left;
		width: 22px;
		height: 18px;
		margin-top: 11px !important;
	}

	.name_e span {
		float: left;
		margin-left: 5px;
		line-height: 40px;
		color: #7c7d81;
	}

	.hang .lx_ly {
		width: calc(100% - 20px);
		height: 120px;
		float: left;
		border: 1px solid #dedede;
		border-radius: 3px;
		padding: 10px;
		font-size: 16px;
		color: #000;
		margin-top: 20px;
		text-indent: 2em;
	}

	.hang .ly_a {
		width: 5%;
		height: auto;
		position: absolute;
		top: 35px;
		left: 5px;
	}

	.ly_a img {
		width: 22px;
		height: 18px;
		float: left;
		margin-top: 0px !important;
	}

	.ly_a span {
		float: left;
		margin-left: 5px;
		color: #7c7d81;
	}

	.lx_left .tj_an {
		width: 100%;
		border-radius: 3px;
		text-align: center;
		font-size: 16px;
		color: #fff;
		height: 40px;
		background: #0069b1;
		border: none;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.lx_nr .lx_right {
		width: 400px;
		height: auto;
		margin-left: 25px;
		float: left;
	}

	.lx_right .hang {
		width: 100%;
		float: left;
		height: auto;
	}

	.lx_right .lx_bt {
		font-size: 20px;
		line-height: 26px;
		color: #202932;
		margin-top: 20px;
		text-indent: 0px;
		float: left;
		margin-bottom: 10px;
	}

	.lx_right .hang img {
		width: 18px;
		height: 18px;
		float: left;
		margin-top: 5px;
	}

	.lx_right .hang span {
		font-size: 14px;
		line-height: 25px;
		color: #7b7c81;
		float: left;
		width: auto;
		text-indent: 0px;
		margin-left: 10px;
	}
</style>
